<template>
  <div class="s-box">
    <div class="loan-title">
      <p>已还金额（元）</p>
      <p style="font-size: 20px">{{loanPlan.repayAmount}}</p>
    </div>
    <group class="main-content" title="还贷历程">
      <cell-box v-for="item in loanPlan.loanTimeList" align-items="center" style="justify-content: space-between;">
        <p>{{item.repayTime}}</p>
        <p>{{item.amount}}元</p>
        <p>{{item.status | formatStatus}}</p>
      </cell-box>
    </group>
  </div>

</template>

<script>
  import {Group, CellBox} from 'vux'

  export default {
    components: {
      Group,
      CellBox,
    },
    data() {
      return {
        loanPlan: {},
        loanPlanId: this.$route.params.id,
        onFetching: false,
        pageNum: 1,
        loading: true
      }
    },
    created() {
      this.getLoanPlan();
    },
    mounted() {

    },
    filters: {
      formatStatus(str) {
        switch (str) {
          case '0':
            return '待还款';
            break;
          case '1':
            return '已还款';
            break;
          case '2':
            return '还款失败';
            break;
        }
      }
    },
    methods: {
      getLoanPlan() {
        this.$api.getLoanPlan({
          loanPlanId: this.loanPlanId
        }).then(data => {
          if (data.returnCode === 1) {
            this.loanPlan = data.loanPlan;
          }
        })

      }
    }
  }
</script>

<style lang="less" scoped>
  .main-content {
    p {
      font-size: .4rem;
    }
  }

  .s-box {
    background-color: #fff;
  }

  .loan-title {
    height: 2.4rem;
    padding-top: 20px;
    p {
      text-align: center;
    }
  }

  .bottom-button {
    position: fixed;
    width: 100%;
    height: 1.4rem;
    background-color: #2D8CF0;
    color: #fff;
    line-height: 1.4rem;
    font-size: .5rem;
    text-align: center;
    bottom: 0;
  }
</style>
